<template>
    <div class="top">
        <el-divider content-position="left">就诊人信息</el-divider>
        <el-form label-width="80px" style="width: 60%; margin: 0 auto;">
            <el-form-item label="用户姓名">
                <el-input placeholder="请输入用户姓名" v-model="userData.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
                <el-select placeholder="请选择证件的类型" v-model="userData.certificatesType" clearable>
                    <el-option v-for="(item, index) in peoInfo" :label="item.name" :key="item.id"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
                <el-input placeholder="请输入证件号码" v-model="userData.certificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="用户性别">
                <el-radio-group v-model="userData.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker type="date" v-model='userData.birthdate' placeholder="请选择出生日期" />
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input placeholder="请输入手机号码" type="number" v-model="userData.phone"></el-input>
            </el-form-item>
        </el-form>
        <!-- —————————————————————————— -->
        <el-divider content-position="left">建档信息(完善后部分医院首次就诊不排队挂号)</el-divider>
        <el-form label-width="80px" style="width: 60%; margin: 0 auto;">
            <el-form-item label="婚姻状况">
                <el-radio-group v-model="userData.isMarry">
                    <el-radio :label="1">已婚</el-radio>
                    <el-radio :label="0">未婚</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="自费/医保">
                <el-radio-group v-model="userData.isInsure">
                    <el-radio :label="1">自费</el-radio>
                    <el-radio :label="0">医保</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="当前住址" prop="">
                <el-cascader :props="props" v-model="userData.addressSelected" />
            </el-form-item>
            <el-form-item label="详细住址" prop="">
                <el-input placeholder="请输入详细地址" v-model="userData.address"></el-input>
            </el-form-item>
        </el-form>
        <!-- —————————————————————————— -->
        <el-divider content-position="left">联系人信息(选填)</el-divider>
        <el-form label-width="80px" style="width: 60%; margin: 0 auto;">
            <el-form-item label="用户姓名">
                <el-input placeholder="请输入用户姓名" v-model="userData.contactsName"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="">
                <el-select placeholder="请选择证件的类型" v-model="userData.contactsCertificatesType" clearable>
                    <el-option v-for="(item, index) in peoInfo" :label="item.name" :key="item.id"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="">
                <el-input placeholder="请输入证件号码" v-model="userData.contactsCertificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input placeholder="请输入手机号码" v-model="userData.contactsPhone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sub">提交</el-button>
                <el-button v-if="!getId.id" @click="reset">重写</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive,nextTick } from 'vue'
import type { CertationTypeResponseData, CertationArr } from '@/api/client/type'
import { reqCertationType, getCascder } from '@/api/client/index'
import { ElMessage, type CascaderProps } from 'element-plus'
import { reqAddOrUpdateUser } from '@/api/client/index'
import type { AddOrUpdateUser } from '@/api/client/type'

// 存储身份信息
let peoInfo = ref<CertationArr>()
// 存储传过来的id
let getId = defineProps(['id','item'])

onMounted(async () => {
    await getInfo()
    //  清空数据
    if (getId.id != '') { 
        userData.id = getId.id
        nextTick(() => {
            Object.assign(userData, getId.item)
            console.log(getId.item);
        })
    }
})
// 获取身份证信息
const getInfo = async () => {
    let result: CertationTypeResponseData = await reqCertationType()
    if (result.code == 200) {
        peoInfo.value = result.data
    }

    console.log(peoInfo.value);

}
// 收集信息
let userData: AddOrUpdateUser = reactive(
    {
        name: '',
        certificatesType: '',
        certificatesNo: '',
        sex: '',
        birthdate: '',
        phone: '',
        isMarry: '',
        isInsure: '',
        addressSelected: [],
        address: '',
        contactsName: '',
        contactsCertificatesType: '',
        contactsCertificatesNo: '',
        contactsPhone: ''
    }
)

// 提交更新或添加
const sub = async () => {
    try {
        //要么新增用户成功|更新已有的用户成功
        await reqAddOrUpdateUser(userData);
        //提示文字
        ElMessage({
            type: "success",
            message: userData.id ? "更新成功" : "新增成功",
        });
        window.location.reload()
    } catch (error) {
        ElMessage({
            type: "success",
            message: userData.id ? "更新失败" : "新增失败",
        });
    }
}
// 返回
const reset = () => {
    Object.assign(userData, {
        name: "",
        certificatesType: "",
        certificatesNo: "",
        sex: 0,
        birthdate: "",
        phone: "",
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: "",
        contactsName: "",
        contactsCertificatesType: "",
        contactsCertificatesNo: "",
        contactsPhone: "",
    });
}



// @ts-ignore0
const props: CascaderProps = {
    lazy: true, //懒加载数据
    //加载级联选择器数据方法
    async lazyLoad(node: any, resolve: any) {
        let result: any = await getCascder(node.data.id || "86");
        //整理数据
        let showData = result.data.map((item: any) => {
            return {
                id: item.id,
                label: item.name,
                value: item.value,
                leaf: !item.hasChildren,
            };
        });
        //注入组件需要展示的数据
        resolve(showData);
    },
};
</script>
<script lang="ts">
export default {
    name:"addUpdate"
}
</script>

<style scoped></style>